<template>
  <view class="employee-manage">
    <!-- 顶部标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="switchTab(0)"
      >
        在职
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="switchTab(1)"
      >
        申请离职
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 2 }" 
        @click="switchTab(2)"
      >
        离职
      </view>
    </view>

    <!-- 搜索框（可选） -->
   <!-- <view class="search-bar">
      <input 
        type="text" 
        placeholder="搜索姓名或岗位" 
        v-model="searchKeyword" 
        @input="handleSearch"
      />
    </view> -->
	<view class="search-bar">
	<u-search borderColor="#ffffff" :inputStyle='inputStyle' @input="handleSearch" :showAction='false' placeholder="搜索姓名或岗位" v-model="searchKeyword"></u-search>
	</view>

    <!-- 员工列表 -->
    <view class="table-header">
      <text class="header-item">姓名</text>
      <text class="header-item">岗位</text>
      <text class="header-item">入职日期</text>
      <text class="header-item">结算方式</text>
    </view>

    <view 
      class="table-row" 
      v-for="(item, index) in filteredList" 
      :key="index"
    >
      <text class="row-item">{{ item.name }}</text>
      <text class="row-item">{{ item.position }}</text>
      <text class="row-item">{{ item.entryDate }}</text>
      <text class="row-item">{{ item.paymentMethod }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		inputStyle:{
			backGroundColor:"#ffffff"
		},
      // 当前激活的标签（0：在职，1：申请离职，2：离职）
      currentTab: 0,
      // 搜索关键词
      searchKeyword: '',
      // 模拟所有员工数据（可根据标签切换状态）
      allEmployees: [
        { name: '张小刚', position: '操作工', entryDate: '2016-10-01', paymentMethod: '日结', status: 0 },
        { name: '李小红', position: '操作工', entryDate: '2016-10-02', paymentMethod: '日结', status: 0 },
        { name: '王小明', position: '操作工', entryDate: '2016-10-03', paymentMethod: '日结', status: 0 },
        { name: '周小伟', position: '操作工', entryDate: '2016-10-04', paymentMethod: '日结', status: 0 },
        { name: '郭小涛', position: '操作工', entryDate: '2016-10-05', paymentMethod: '日结', status: 0 },
        { name: '张小刚', position: '搬运工', entryDate: '2016-10-01', paymentMethod: '月结', status: 0 },
        { name: '李小红', position: '搬运工', entryDate: '2016-10-02', paymentMethod: '月结', status: 0 },
        { name: '王小明', position: '搬运工', entryDate: '2016-10-03', paymentMethod: '月结', status: 0 },
        { name: '周小伟', position: '搬运工', entryDate: '2016-10-04', paymentMethod: '月结', status: 0 },
        { name: '郭小涛', position: '搬运工', entryDate: '2016-10-05', paymentMethod: '月结', status: 0 },
        // 模拟申请离职数据
        { name: '赵六', position: '质检员', entryDate: '2023-01-01', paymentMethod: '月结', status: 1 },
        // 模拟离职数据
        { name: '孙七', position: '司机', entryDate: '2022-06-01', paymentMethod: '日结', status: 2 },
      ]
    };
  },
  computed: {
    // 根据标签和搜索关键词过滤数据
    filteredList() {
      return this.allEmployees.filter(item => {
        // 标签过滤
        if (item.status!== this.currentTab) return false;
        // 搜索过滤（不区分大小写）
        const keyword = this.searchKeyword.toLowerCase();
        return (
          item.name.toLowerCase().includes(keyword) ||
          item.position.toLowerCase().includes(keyword)
        );
      });
    }
  },
  methods: {
    // 切换标签
    switchTab(tabIndex) {
      this.currentTab = tabIndex;
      this.searchKeyword = ''; // 切换标签时清空搜索
    },
    // 搜索处理
    handleSearch() {
      // 可在此处优化搜索逻辑（如防抖）
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.employee-manage {
  padding: 10px;
  background-color: #f5f5f5;
}

/* 标签栏样式 */
.tab-bar {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  color: #333;
}

.tab-item.active {
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
}

/* 搜索框样式 */
.search-bar {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20rpx 10rpx;
}


/* 表格标题样式 */
.table-header {
  display: flex;
  flex-direction: row;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  font-weight: bold;
}

.header-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-right: 1px solid #ddd;
}

.header-item:last-child {
  border-right: none;
}

/* 表格行样式 */
.table-row {
  display: flex;
  flex-direction: row;
  border: 1px solid #ddd;
  border-top: none;
  background-color: #fff;
}

.row-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-right: 1px solid #ddd;
}

.row-item:last-child {
  border-right: none;
}
</style>